<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    #mydiv {
      width: 300px;
      height: 200px;
      background-color: skyblue;
      /* 添加圆角，值为圆的半径 */
      border-radius: 20px;
    }

    #circle {
      width: 100px;
      height: 100px;
      background-color: red;
      /* 添加圆角，值为圆的半径 */
      /* border-radius: 50px; */
      /* 或 */
      border-radius: 50%;
    }

    #title {
      width: 300px;
      height: 100px;
      border-radius: 50px;
      background-color: #cfa;
    }

    #four {
      width: 300px;
      height: 100px;
      background-color: #eee;
      /* 坐上、右上、右下、左下 */
      border-radius: 10px 20px;
    }
  </style>
  <body>
    <div id="mydiv"></div>
    <div id="circle"></div>
    <div id="title"></div>
    <div id="four"></div>
  </body>
</html>
